<template>
	<div>
		<!-- 引入公共头部组件 -->
		<HeaderTitle title="样品" rightTextColor="#1959F9" :rightContent="'新建'"
			@selectRightIconChange="selectRightIconChange" :inputValue="queryParam[0].keyword" placeholder="请输入客户名称"
			:isBack="true" :isSearch="true" :isTab="true" :currentIndex="current" @confirm="search" @cancel="cancel"
			:tabsList="tabsList" @tabOnClickItem="onClickItem" />

		<!-- 内容区域 -->
		<div style="width: 100%;">
			<!-- 我的 样品-->
			<div v-if="current == 0" class="outerBox" style="padding-top: 110px;">
				<div class="MySamplebox" v-for="item in data" :key="item.Id" @click="sampleChange(item)">
					<div class="Father">
						<div class="state">
							<div class="sampleName">{{ item.CustomerName }}</div>
							<div style="margin: 8px">
								<uni-tag size="normal" :text="statusText(item.ApprovalStatus)" :inverted="true"
									:type="statype(item.ApprovalStatus)" />
							</div>
						</div>
						<div>
							<div style="margin-left: 10px;font-size: 13px;">
								样品单号：{{ item.DocumentNo }}
							</div>

							<div class="DeliverAddress" style="font-size: 13px;">
								地址：{{ item.ReceiveAddress }}
							</div>
						</div>
					</div>
					<div v-if="item.ApprovalStatus !== 1"
						style="padding-right: 15px; padding-left: 10px;text-align: right;">
						<u-button size="mini" @click.stop="Edit(item)" style="margin-top: 12px;height: 60rpx;"
							type="primary">编辑</u-button>
					</div>
				</div>
			</div>
			<!-- 样品反馈区域 -->
			<div v-else class="outerBox" style="padding-top: 110px;">
				<div>
					<div class="MySamplebox" v-for="item in data" @click="feed(item)" :key="item.Id">
						<div class="Father">
							<div class="state">
								<div class="sampleName">{{ item.CustomerName }}</div>
								<div style="margin: 8px">
									<uni-tag size="normal" :text="SampleStatusText(item.SampleStatus)" :inverted="true"
										:type="statype(item.SampleStatus)" />
								</div>
							</div>
							<div>
								<div style="margin-left: 10px;font-size: 13px;">
									样品单号：{{ item.DocumentNo }}
								</div>

								<div class="DeliverAddress" style="font-size: 13px;">
									试用说明：{{ item.SampleTrialRemark }}
								</div>
							</div>
							<div v-if=" item.SampleStatus == 0 || item.SampleStatus == null"
								style="padding-right: 15px; padding-left: 10px;display: flex;justify-content: flex-end;align-items: center;">
								<u-button type="warning" size="medium" @click.stop="feedBackChange(item)"
									style="margin-top: 12px;">反馈</u-button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
			</div>
		</div>


		<!-- <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" /> -->
		<!-- <Edit :readonly="readonly" :parentObj="this" ref="edit" /> -->
		<!-- <myWork :readonly="readonly" :parentObj="this" ref="myWork" /> -->
		<!-- <work :readonly="readonly" :parentObj="this" ref="work" /> -->
		<!-- 暂时不要删除后续打开 反馈组件 -->
		<feedback :parentObj="{ ...this }" ref="feedback" />
		<!-- <feedbackDetail ref="feedbackDetail" /> -->
	</div>
</template>

<script>
	import {
		GetDataListByMySelfAndMoreCondition,
		DeleteDataOfAll,
		GetDataListByMoreCondition
	} from '@/api/interface.js'
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'

	// import Edit from "./Edit.vue";
	// import work from "./work.vue";

	import feedback from "./feedback.vue";
	// import feedbackDetail from "./feedbackDetail.vue";
	// import myWork from "./myWork.vue";
	// 引入公共头部组件
	// import HeaderMenu from "../../components/VolHeaderMenu.vue";

	export default {
		components: {
			// 头部导航栏
			HeaderTitle,
			// 反馈组件
			feedback,
			// Edit,
			// 样品反馈详情
			// feedbackDetail,
			// HeaderMenu
			// work
		},

		data() {
			return {
				styleType: 'text',
				// 标签栏点击的是我的样品还是反馈
				current: 0,
				tabsList: ['我的样品', '样品反馈'],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},

				active: 0,
				readonly: false,
				loading: false,
				finished: false,
				PageRows: 10,
				pagination: {
					current: 1,
					pageSize: 10,
				},
				cardData: [],
				SWOloading: false,
				SWOfinished: false,
				SWOPageRows: 10,
				SWOTitle: "",
				Total: 0,
				Keyword: "",
				data: [],
				MycardData: [],
				Myloading: false,
				Myfinished: false,
				MyPageRows: 10,
				userId: "",
				GLtitle: "",
				GLloading: false,
				GLfinished: false,
				GLPageRows: 10,
				GLcardData: [],
				active2: 0,
				queryParam: [{
					condition: "CustomerName",
					Keyword: ""
				}]
			};
		},
		onShow() {
			this.data = [];
			this.getDataList();
		},

		//下拉刷新
		onPullDownRefresh() {
			this.pagination.current = 1
			uni.stopPullDownRefresh();
			this.data = [];
			this.getDataList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.pagination.current++;
			this.getDataList();
		},

		methods: {
			// 新建样品
			selectRightIconChange() {
				uni.navigateTo({
					url: "/pages/service/Add"
				})
			},
			// tabs标签切换
			// 标签栏切换事件
			onClickItem(e) {
				console.log('切换', e)
				this.current = e
				this.data = [];
				this.status = "loading"
				if (this.current == 0) {
					// 点击的是我的样品
					this.queryParam = [{
						condition: "CustomerName"
					}];
				} else if (this.current == 1) {
					// 点击的是我的反馈
					this.queryParam = [{
							condition: "CustomerName"
						},
						{
							condition: "DeliverStatus",
							Keyword: 2
						}
					];
				}
				this.status = "loading"
				this.getDataList()
				// else if (name == 2) {
				// 	this.getGLcardData();
				// } else if (name == 3) {
				// 	this.getWorkorderList();
				// }
			},
			// 反馈按钮点击事件
			feedBackChange(item) {
				this.$refs.feedback.openForm(item.Id);
			},
			// 我的样品列表点击事件
			sampleChange(item) {
				if (item.ApprovalStatus == 1 || item.ApprovalStatus == 2) {
					// 只有审批通过 或者驳回的条件下可以查看详情
					uni.navigateTo({
						url: "/pages/service/Edit?title=查看样品" + "&Id=" + item.Id
					})
				}
			},
			statype(str) {
				if (str == 0 || str == null) {
					return "primary";
				} else
				if (str == 1) {
					return "success";
				} else
				if (str == 2) {
					return "error";
				} else {
					return ""
				}
			},
			statusText(str) {
				if (str == 0) {
					return "申请中";
				} else
				if (str == 1) {
					return "审批通过";
				} else
				if (str == 2) {
					return "驳回";
				} else {
					return ""
				}
			},
			SampleStatusText(str) {
				if (str == 0) {
					return "未试用";
				} else
				if (str == 1) {
					return "试用成功";
				} else
				if (str == 2) {
					return "试用失效";
				} else {
					return ""
				}
			},
			GLonLoad() {
				this.GLPageRows += 20;
				this.getGLcardData();
			},
			MyonLoad() {
				console.log("object");
				this.MyPageRows += 20;
				this.getMyWorkorderList();
			},
			SWOonLoad() {
				console.log("object");
				this.SWOPageRows += 20;
				this.getWorkorderList();
			},
			onLoad() {
				this.PageRows += 20;
				this.getDataList();
				console.log("object");
			},
			GLtitlesearch() {},
			mywork(item) {
				this.$router.push({
					path: "/service/myWork",
					query: {
						Id: item.Id
					}
				});
				// this.$refs.myWork.openForm(item);
			},
			getGLcardData() {
				this.http
					.post(
						"/SWOManagement/ServiceWorkOrderMain/GetDataListByMySelfCustomer", {
							PageIndex: 1,
							PageRows: this.GLPageRows,
							SortField: "CreateTime",
							SortType: "desc",
							Search: [{
								Condition: "SWOTitle",
								Keyword: this.GLtitle
							}]
						}
					)
					.then(resJson => {
						if (resJson.Success) {
							this.GLcardData = resJson.Data;
							this.GLloading = false;
							if (this.GLcardData.length >= resJson.Total) {
								this.GLfinished = true;
							} else {
								this.GLfinished = false;
							}
						}
					});
			},
			//待办
			getMyWorkorderList() {
				this.http
					.post("/SWOManagement/ServiceWorkOrderMain/GetDataListByMyToDo", {
						PageIndex: 1,
						PageRows: this.MyPageRows,
						SortField: "CreateTime",
						SortType: "desc",
						Search: [{
							Condition: "CreatorId",
							Keyword: ""
						}]
					})
					.then(resJson => {
						if (resJson.Success) {
							if (!resJson.Data) {
								resJson.Data = [];
							}
							this.MycardData = resJson.Data;
							this.Myloading = false;
							if (this.MycardData.length >= resJson.Total) {
								this.Myfinished = true;
							} else {
								this.MyOfinished = false;
							}
						}
					});
			},
			onRightWork() {
				this.readonly = false;
				this.$router.push({
					path: "/service/work",
					query: {
						readonly: this.readonly ? 1 : 0
					}
				});
				// this.$refs.work.openForm();
			},
			sapleEdit(item) {
				this.readonly = true;
				// this.$refs.work.openForm(item);
				this.$router.push({
					path: "/service/work",
					query: {
						Id: item.Id,
						readonly: this.readonly ? 1 : 0
					}
				});
			},
			op() {
				this.http.post("/Base_Manage/Home/GetOperatorInfo").then(resJson => {
					if (resJson.Success) {
						this.userId = resJson.Data.UserInfo.Id;
					}
				});
			},

			getWorkorderList() {
				this.http
					.post(
						"/SWOManagement/ServiceWorkOrderMain/GetDataListByMoreCondition", {
							PageIndex: 1,
							PageRows: this.SWOPageRows,
							SortField: "CreateTime",
							SortType: "desc",
							Search: [{
									Condition: "CreatorId",
									Keyword: this.userId
								},
								{
									Condition: "SWOTitle",
									Keyword: this.SWOTitle
								}
							]
						}
					)
					.then(resJson => {
						if (resJson.Success) {
							this.cardData = resJson.Data;

							this.SWOloading = false;
							if (this.cardData.length >= resJson.Total) {
								this.SWOfinished = true;
							} else {
								this.SWOfinished = false;
							}
						}
					});
			},

			//  我的反馈列表点击
			feed(item) {
				uni.navigateTo({
					url: "/pages/service/Edit?title=我的反馈" + "&Id=" + item.Id
				})
			},
			call2(key) {
				console.log(key);
				if (key == 0) {
					this.getWorkorderList();
				} else if (key == 1) {
					this.getMyWorkorderList();
				}
			},

			paginationchange(a) {
				// a:当前选中页码
				this.pagination.current = a;
				this.getDataList();
			},
			btn(id) {
				Dialog.confirm({
						message: "确定要删除吗",
						confirmButtonColor: "#1989fa"
					})
					.then(() => {
						this.http
							.post("/SampleManagement/SPL_SampleApplyMain/DeleteDataOfAll", id)
							.then(resJson => {
								if (resJson.Success) {
									this.$toast("删除成功");
									this.getDataList();
								} else {
									this.$toast("删除失败");
								}
							});
					})
					.catch(() => {
						console.log(123);
					});
			},
			// 取消
			cancel() {
				console.log(123);
				if (this.current == 0) {
					this.queryParam = [{
						condition: "CustomerName"
					}];
				} else {
					this.queryParam = [{
							condition: "CustomerName"
						},
						{
							condition: "DeliverStatus",
							Keyword: 2
						}
					];
				}

				this.data = [];
				this.status = "loading"
				this.getDataList();
			},
			// 返回上一页
			onClickLeft() {
				this.$router.go(-1);
			},

			//弹出页面
			Edit(item) {
				if (item.ApprovalStatus == 1) {
					this.readonly = true;
				} else {
					this.readonly = false;
				}
				uni.navigateTo({
					url: '/pages/service/Edit?Id=' + item.Id + '&title=修改样品'
				})
			},
			//我的样品搜索
			search(value) {
				console.log('样品搜索确认过来', value)
				this.queryParam[0].Keyword = value
				this.data = [];
				this.status = "loading"
				// 获取我的额样品列表
				this.getDataList();
			},
			//我的反馈搜索
			// searchfeed(value) {
			//   this.data = [];
			//   this.loading = true;
			//   this.finished = false;
			//   // this.queryParam[0].Condition = "CustomerName";
			//   this.queryParam[0].Keyword = value;
			//   this.getDataList();
			// },
			SWOTitlesearch(value) {
				this.SWOTitl = value;
				this.getWorkorderList();
			},
			SWOTitleclear() {
				this.SWOTitle = "";
				this.getWorkorderList();
			},
			clearfeed() {
				this.queryParam = [{
					condition: "CustomerName"
				}];
				this.getDataList();
			},
			// 获取我的额样品列表
			getDataList() {
				this.data = []
				this.status = "loading"
				GetDataListByMySelfAndMoreCondition({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "CreateTime",
						SortType: "desc",
						Search: this.queryParam
					})
					.then(resJson => {
						this.Total = resJson.Data.Total;
						if (this.pagination.current == 1) {
							this.data = resJson.Data;
						} else {
							this.data = this.data.concat(resJson.Data);
						}
						if (this.data.length >= resJson.Total) {
							this.status = 'noMore'; // 没有更多数据
						} else {
							this.status = 'loading'; // 没有更多数据
						}
					});
			}
		},
		// watch: {
		// 	$route(a, b) {
		// 		// 默认样品反馈
		// 		this.active = 0
		// 		this.loading = true;
		// 		this.finished = false;
		// 		this.queryParam = [{
		// 			condition: "CustomerName"
		// 		}];
		// 		this.getMyWorkorderList();
		// 		this.getWorkorderList();
		// 		this.getDataList(0);
		// 		this.getGLcardData();
		// 		console.log(a, b);
		// 	}
		// }
	};
</script>

<style scoped>
	/* 覆盖van-button的默认样式 */
	.van-button {
		padding: 0 10px 0 10px !important;
	}

	.DeliverAddress {
		margin-left: 10px;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 超出几行显示 */
		-webkit-line-clamp: 1;
	}

	.state {
		display: flex;
		justify-content: space-between;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.delete {
		padding-top: 10px;
		background-color: #fff;
		padding-right: 20px;
		height: 60px;
		font-size: 60px;
		color: red;
	}

	.outerBox {}

	.btn {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.sampleName {
		font-weight: 600;
		line-height: 1.8;
		color: #000;
		font-size: 14px;
		margin-left: 10px;
		margin-top: 5px;
	}

	.MySamplebox {
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		position: relative;
		width: 95%;
		margin: 3px auto;
		padding-bottom: 10px;
		margin-bottom: 10px;
		background-color: #fff;
	}

	img {
		width: 100px;
		height: 100px;
	}

	.fixedbox {
		position: fixed;
		bottom: 0;
		right: 0;
		/* height: 50px; */
		background: #fff;
		width: 100vw;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.code {
		display: flex;
		justify-content: flex-start;
		margin-left: 10px;
		color: #777;
	}

	.Foricon {
		color: blue;
		position: absolute;
		right: 8px;
	}

	.btn {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.formalBox {
		height: calc(100vh - 150px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto;
	}

	.cardName {
		padding-top: 10px;
		/* margin-left: 10px; */
		margin-bottom: 5px;
		color: #000000;
		text-align: center;
		font-weight: 600;
		font-size: 18px;
		line-height: 1.8;
	}

	.companyAddress {
		padding-top: 10px;
		margin-left: 10px;

		color: #777;
		/* font-weight: 600;
  font-size: 18px; */
		line-height: 1.3;
	}

	.boxFormal {
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		position: relative;

		width: 95%;
		/* height: 80px; */
		padding-bottom: 10px;
		margin: 3px auto;
		margin-bottom: 10px;
	}

	/* .Father {
  display: flex;
} */
</style>